<template>
  <div class="common-layout">
    <el-container>
      <el-header
        style="background-color: slateblue; color: #fff; line-height: 60px"
        >主应用 Vite 构建</el-header
      >
      <el-container style="height: calc(100vh - 60px)">
        <el-aside
          width="260px"
          style="height: 100%"
        >
          <el-menu
            class="el-menu-vertical-demo"
            router
            :default-active="$route.path"
          >
            <el-menu-item index="/" route="/">
              <span>首页 主应用</span>
            </el-menu-item>
            <el-menu-item index="/subapp/sub-vue2/" route="/subapp/sub-vue2/">
              <span>Vue2 子应用 🍰 webpack</span>
            </el-menu-item>
            <el-menu-item index="/sub-vue3/" route="/sub-vue3/">
              <span>Vue3 子应用 🍎 vite</span>
            </el-menu-item>
            <el-menu-item index="/sub-react-hash/" route="/sub-react-hash/">
              <span>React 子应用 🍍 hash</span>
            </el-menu-item>
            <el-menu-item index="/sub-react-history/" route="/sub-react-history/">
              <span>React 子应用 🍌 history</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color: cornflowerblue">
          <!-- 主应用路由渲染出口 -->
          <router-view />
          <!-- 微前端子应用渲染出口 -->
          <!-- <div id="subapp-container"></div> -->
          <SubAppContainer />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import SubAppContainer from './qiankun/SubAppContainer.vue'
</script>

<style scoped></style>
